<title>选课搜索</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>选课</cite></a>
        <a><cite>个人选课</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">课程列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-page" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="lineBar">
    <a class="layui-btn layui-btn-xs" lay-event="choose">选课</a>
</script>

<script type="text/html" id="toolbarlist">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <select lay-filter="campus" id="campus" name="campus">
                <option value="">ALL</option>
                <option value="1">崂山</option>
                <option value="2">鱼山</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select lay-filter="type" id="type" name="type">
                <option value="">ALL</option>
                <option value="1">通识</option>
                <option value="2">公共基础</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input id="keyword" type="text" placeholder="搜索..." autocomplete="off" class="layui-input" lay-event="serach">
        </div>
    </div>
</script>
<script>
    layui.use(['jquery', 'table'], function(){
        var $ = layui.$, form = layui.form,
            table = layui.table;
        var tablelns;
        function getType(type) {
            switch (type) {
                case 0:
                    return "专业课";
                case 1:
                    return "通识课";
                case 2:
                    return "公共基础课";
                default:
                    return "类型未知";
            }
        }
        // 先判断url中有无keyword,是否从其他页面转来的
        var url = window.location.href;
        var index = url.indexOf("=");
        if (index !== -1) {
            var keyword = url.substr(index + 1);
            renderTable(decodeURI(keyword));
        }else {
            renderTable("");
        }

        function renderTable(keyword) {
            tablelns = table.render({
                elem: '#test-table-page'
                ,url: "/uclass/elective/publicclass"
                ,method: 'get'
                ,toolbar: '#toolbarlist'
                ,where: {keyword:keyword}
                ,cols: [[
                    {field:'name', title: '课程名', align: 'left'}
                    ,{field:'type', title:'类别', align:'left', templet: function (d) {return getType(d.type)}}
                    ,{align:'center', minWidth:150, title:'操作', toolbar:'#lineBar'}
                ]]
                ,parseData: function(res) {
                    return {
                        "status": res.status,
                        "message": res.message,
                        "data": res.data
                    };
                }
                ,done: function () {
                    // 监听搜索框enter
                    $('#keyword').bind('keypress', function (event) {
                        if (event.keyCode === 13) {
                            var keyword = $('#keyword').val();
                            if (keyword !== "" && keyword !== undefined && keyword !== null) {
                                reloadTable();
                            }
                        }
                    });
                }
                ,response: {
                    statusName: 'status'
                    ,statusCode: 200
                    ,msgName: 'message'
                    ,dataName: 'data'
                }
            });
        }
        // 监听校区
        form.on('select(campus)', function (obj) {
            reloadTable();
        });
        // 监听课程类别
        form.on('select(type)', function (obj) {
            reloadTable();
        });



        function reloadTable() {
            debugger;
            var keyword = $('#keyword').val();
            var campus = $('#campus').val();
            var type = $('#type').val();
            tablelns.reload({
                where: {keyword: keyword, campus: campus, type: type},
                done: function (res, curr, count) {
                    $('#campus').val(campus);
                    $('#type').val(type);
                    form.render('select');
                    // 监听搜索框enter
                    $('#keyword').bind('keypress', function (event) {
                        if (event.keyCode === 13) {
                            var keyword = $('#keyword').val();
                            if (keyword !== "" && keyword !== undefined && keyword !== null) {
                                reloadTable();
                            }
                        }
                    });
                }
            })
        }
        
        table.on('tool(test)', function (obj) {
            var className = encodeURI(obj.data.name);
            var url = "/uclass/admin/index#/menu/elective/electiveclass#?classname=" + className;
            window.location.href = url;
        })
    });
</script>